//index.js
//获取应用实例
const app = getApp()
const http = require('../../modules/http')
Page({
  data: {
    page1: 0,
    page2: 0,
    page3: 0,
    page4: 0,
    chinese: [],
    japan: [],
    korean: [],
    europe: []
    /* 
      猜想 这里使用music:[[]][[]][[]][[]]来装载不同van-tab下的数据
    */
  },
  onLoad() {
    var This = this;
    (async function () {
      var res = await http.getData({ cat: '华语', offset: This.data.page1 })
      var { playlists } = res.data;
      var chinese = playlists;
      console.log(chinese);
      This.setData({
        chinese
      })
    })()
  },
  //猜想思路  使用一个函数封装 handleData 
  /* 猜想错误 data里的数据是唯一的，这里使用函数定义的数据终归需要setData上去  会让数据重复。
    猜想错误2 可以使之数据覆盖，但是再点到其他的van-tab里面的时候 是需要重新加载数据。
    猜想解决方法  使放在data的数组为一个二维数组。用对应绑定的van-tab-id 来作为二维下标
  */
  //   handleChinese: function () {
  //     (async function () {
  //       var res = await http.getData({ cat: '华语', offset: This.data.page1 })
  //       var { playlists } = res.data;
  //       var chinese = playlists;
  //       console.log(chinese);
  //       This.setData({
  //         chinese
  //       })
  //     })()
  //   },
  //   handleJapan: function () {
  //     //没必要使用async 和自定义函数封装 但是为了熟悉 写一下
  //     (async function () {
  //       var res =await http.getData({ cat: '日语', offset: This.data.page1 })
  //       var { playlists } = res.data;
  //       var japan = playlists;
  //       console.log(japan);
  //       This.setData({
  //         japan
  //       })
  //   })()
  // },
  //   handleKorean: function () {
  //     //没必要使用async 和自定义函数封装 但是为了熟悉 写一下
  //     (async function () {
  //       var res = await http.getData({ cat: '韩语', offset: This.data.page1 })
  //       var { playlists } = res.data;
  //       var korean = playlists;
  //       console.log(korean);
  //       This.setData({
  //         korean
  //       })
  //     })()
  //   },
  //   handleEurope: function () {
  //     //没必要使用async 和自定义函数封装 但是为了熟悉 写一下
  //     (async function () {
  //       var res = await http.getData({ cat: '欧美', offset: This.data.page1 })
  //       var { playlists } = res.data;
  //       var europe = playlists;
  //       console.log(europe);
  //       This.setData({
  //         europe
  //       })
  //     })()
  //   },
  /* 
    下面用到的点击函数 会在点击后发送HTTP请求，如果反复点击会重复发送HTTP请求吗
    猜想1，在onLocd里直接抓取四个页面的数据
    结果：失败 显示函数未定义 原因未知。
    原因 :忽略了函数内this指针的导向问题，没有指向外部的函数
  */
  onClick(event) {
    var This=this;
    var num = event.detail.index;
    switch (num) {
      case 0: {
        (async function () {
          
          var res = await http.getData({ cat: '华语', offset: This.data.page1 })
          var { playlists } = res.data;
          var chinese = playlists;
          console.log(chinese);
          This.setData({
            chinese
          })
        })()
      }; break;
      case 1: {
        (async function () {
          var res = await http.getData({ cat: '日语', offset: This.data.page2 })
          var { playlists } = res.data;
          var japan = playlists;
          console.log(japan);
          This.setData({
            japan
          })
        })()
      }; break;
      case 2: {
        (async function () {
          var res = await http.getData({ cat: '韩语', offset: This.data.page3 })
          var { playlists } = res.data;
          var korean = playlists;
          console.log(korean);
          This.setData({
            korean
          })
        })()
      }; break;
      case 3: {
        (async function () {
          var res = await http.getData({ cat: '欧美', offset: This.data.page4 })
          var { playlists } = res.data;
          var europe = playlists;
          console.log(europe);
          This.setData({
            europe
          })
        })()
      }; break;
    }
  }

})